<template lang="html">
    <div
      class="x-bar"
      :id="chartId"
      :option='option'
      >
      </div>
</template>

<script>
import { series, perCount } from '../../components/home/geoCoordMap'
import { formatNum } from '../../util/tool'
let china = require("echarts/map/json/china")
export default {
  props : {
    chartId : {
      type : String,
    },
    title : {
      type : String,
    },
    options : {
      type : Array,
    }
  },
  data(){
    return {
      theMap: {},
      chart : '',
      pCount: perCount,
      option : {
        tooltip : {
          trigger: 'item',
          formatter:function(params, ticket, callback){
            if(params.seriesType=="effectScatter") {
                return params.name+"站客流量<br />今日增量："+perCount[params.name].day+'<br />历史总量： '+perCount[params.name].all;
            }else if(params.seriesType=="lines"){
                return params.data.toName+">"+params.data.fromName+"<br />客流量 : "+params.data.value;
            }else{
                return params.name;
            }
          }
        },
        visualMap: {
          type: 'continuous',
          min: 0,
          max: 4000000,
          left: '4%',
          bottom: '1%',
          text:['高','低'],           // 文本，默认为数值文本
          realtime: false,
          calculable : true,
          textStyle: {
            color: '#fff'
          },
          inRange: {
            color: ['#49d9fe', '#ff4800']
          }
        },
        geo: {
          name: 'china',
          map: 'chuang',
          zoom: 1.2,
          aspectScale: 0.9,
          label: {
            emphasis: {
              show: false
            }
          },
          roam: false,
          itemStyle: {
            normal: {
              areaColor: '#0f3478',
              borderColor: '#00a0e9'
            },
            emphasis: {
              areaColor: '#072e6f'
            }
          }
        },
        series: series
      }
    }
  },
  watch : {
    options: {
      handler(newVal, oldVal) {
        if (this.chart) {
          if (newVal) {
            this.chart.setOption(this.option);
          } else {
            this.chart.setOption(this.option);
          }
        } else {
            this.init();
        }
      },
      deep: true
    }
  },
  methods : {
    init() {
      this.chart = this.$echarts.init(document.getElementById(this.chartId));
      this.chart.setOption(this.option);
      window.addEventListener("resize", this.chart.resize);
    }
  },
  mounted(){
    this.theMap = china;
    this.theMap.features.splice(31,3);
    this.theMap.features.splice(10,20);
    this.theMap.features.splice(0,7);
    this.$echarts.registerMap('chuang', this.theMap);
    this.init();
  }
}
</script>

<style lang="scss" scoped>
  .x-bar {
    width: 100%;
    height: 100%;
  }
</style>
